<template>
  <div class="upload-container">
    <div class="upload-area"
      :class="{ 'is-dragging': dragging }"
      @dragover.prevent="handleDragOver"
      @dragleave.prevent="handleDragLeave"
      @drop.prevent="handleDrop"   
    >
      <div class="upload-content">
        <el-icon class="upload-icon"><Upload /></el-icon>
        
        <div class="upload-text">
          <template v-if="!dragging">
            <div class="primary-text">将文件拖放到此处</div>
            <div class="secondary-text">或</div>
          </template>
          <div v-else class="file-name">
            <el-icon><Document /></el-icon>
            <span>{{ fileName }}</span>
          </div>
        </div>

        <div class="global_btn" @click="triggerFileInput">
          <el-icon><Plus /></el-icon>
          <span>选择文件</span>
        </div>
      </div>

      <div class="progress-wrapper" v-if="percentage">
        <el-progress 
          :percentage="percentage"
          :text-inside="true"
          :stroke-width="20"
          :show-text="true"
        />
      </div>
    </div>

    <input 
      type="file"
      ref="fileInput"
      @change="handleFileChange"
      style="display: none;"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'upLoadFile',
})
</script>
<script setup  lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from "element-plus"
import { Upload, Document, Plus } from '@element-plus/icons-vue'

const emit = defineEmits(['handleUpload'])
const fileUrl = defineModel({
  set(value: string) {
    return value
  }
})
watch(fileUrl, (val: any) => {
  if (val) {
    dragging.value = true
    fileName.value = val.split("/").pop()
  }
})

const dragging = ref<boolean>(false)
const fileName = ref<string>("")
const fileInput = ref()
const percentage = ref(0)
const handleDragOver = () => dragging.value = true
const handleDragLeave = () => dragging.value = false
const triggerFileInput = () => fileInput.value.click()
const handleDrop = (event: any) => {
  const [file] = event.dataTransfer.files
  if (file) handleFiles(file)
}
const handleFileChange = (event: any) => {
  const [file] = event.target.files
  if (file) handleFiles(file)
}
const handleFiles = async (fileData: any) => {
  fileName.value = fileData.name
  dragging.value = true
  emit('handleUpload', fileData, uploadProgress)
}
const uploadProgress = (e: any) => {
  percentage.value = Math.round((e.loaded / e.total) * 100)
}
const handleError = (error: any, message: string) => {
  ElMessage.error(message)
  console.error(error)
}
</script>

<style lang="scss" scoped>
@import '@/styles/progress.scss';
.upload-container {
  width: 100%;
  
  .upload-area {
    position: relative;
    padding: 40px;
    border: 2px dashed var(--el-border-color);
    border-radius: 8px;
    background-color: transparent;
    transition: all 0.3s;
    
    &.is-dragging {
      border-color: var(--el-color-primary);
      background-color: rgba(var(--el-color-primary-rgb), 0.1);
    }
    
    .upload-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      
      .upload-icon {
        font-size: 48px;
        color: var(--el-text-color-secondary);
      }
      
      .upload-text {
        text-align: center;
        
        .primary-text {
          font-size: 16px;
    
          margin-bottom: 8px;
        }
        
        .secondary-text {
          font-size: 14px;
        
        }
        
        .file-name {
          display: flex;
          align-items: center;
          gap: 8px;
          .el-icon {
            font-size: 20px;
          }
        }
      }
    }
    
    .progress-wrapper {
      margin-top: 20px;
      
      :deep(.el-progress-bar__outer) {
        background-color: rgba(var(--el-color-primary-rgb), 0.1);
      }
    }
  }
}
html.dark {
  .upload-area {
    background-color: transparent;
    
    &.is-dragging {
      background-color: rgba(var(--el-color-primary-rgb), 0.15);
    }
  }
}
</style>
